<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户认证系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 420px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(120deg, #5a85de, #7bb3ff);
            padding: 25px 30px;
            text-align: center;
            color: white;
        }

        .header h2 {
            font-weight: 600;
            font-size: 24px;
        }

        .form-container {
            padding: 30px;
        }

        .toggle-buttons {
            display: flex;
            margin-bottom: 25px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .toggle-btn {
            flex: 1;
            padding: 12px;
            background: #f7f9fc;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .toggle-btn.active {
            background: #5a85de;
            color: white;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border 0.3s;
        }

        .form-control:focus {
            border-color: #5a85de;
            outline: none;
        }

        .btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(120deg, #5a85de, #7bb3ff);
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn:hover {
            background: linear-gradient(120deg, #4a75ce, #6ba3ef);
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        .btn:active {
            transform: translateY(0);
        }

        .verification-section {
            display: flex;
            gap: 10px;
        }

        .verification-section .form-control {
            flex: 1;
        }

        .send-code-btn {
            white-space: nowrap;
            padding: 12px 15px;
            background: #f7f9fc;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .send-code-btn:hover {
            background: #e8effb;
        }

        .send-code-btn:disabled {
            background: #f0f0f0;
            color: #aaa;
            cursor: not-allowed;
        }

        .message {
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            text-align: center;
        }

        .success {
            background: #e6f7ee;
            color: #2ecc71;
            border: 1px solid #a3e4bf;
        }

        .error {
            background: #fde9e9;
            color: #e74c3c;
            border: 1px solid #f5b7b1;
        }

        .info {
            background: #e8f4fd;
            color: #3498db;
            border: 1px solid #aed6f1;
        }

        .countdown {
            color: #888;
            font-size: 14px;
            margin-top: 8px;
            text-align: center;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h2>{{ isLogin ? '用户登录' : '用户注册' }}</h2>
            </div>

            <div class="form-container">
                <div class="toggle-buttons">
                    <button :class="['toggle-btn', { active: isLogin }]" @click="toggleForm(true)">
                        登录
                    </button>
                    <button :class="['toggle-btn', { active: !isLogin }]" @click="toggleForm(false)">
                        注册
                    </button>
                </div>

                <div v-if="message" :class="['message', messageType]">
                    {{ message }}
                </div>

                <form @submit.prevent="submitForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" class="form-control" placeholder="请输入用户名"
                            v-model="formData.username" required>
                    </div>

                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码"
                            v-model="formData.password" required>
                    </div>

                    <div class="form-group" v-if="!isLogin">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" class="form-control" placeholder="请输入邮箱" v-model="formData.email"
                            required>
                    </div>

                    <div class="form-group" v-if="showVerificationSection">
                        <label>验证码</label>
                        <div class="verification-section">
                            <input type="text" class="form-control" placeholder="请输入验证码"
                                v-model="formData.verificationCode" required>
                            <button type="button" :class="['send-code-btn', { hidden: codeSent }]"
                                @click="sendVerificationCode" :disabled="isSending">
                                {{ isSending ? '发送中...' : '获取验证码' }}
                            </button>
                        </div>
                        <div class="countdown" v-if="codeSent">
                            验证码已发送，{{ countdown }}秒后失效
                        </div>
                    </div>

                    <button type="submit" class="btn" v-if="!showVerificationSection">
                        {{ isLogin ? '登录' : '注册' }}
                    </button>

                    <button type="submit" class="btn" v-else>
                        验证
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive, computed, watch } = Vue;

        createApp({
            setup() {
                const isLogin = ref(true);
                const formData = reactive({
                    username: '',
                    password: '',
                    email: '',
                    verificationCode: ''
                });
                const message = ref('');
                const messageType = ref('');
                const showVerificationSection = ref(false);
                const codeSent = ref(false);
                const isSending = ref(false);
                const countdown = ref(300);
                let countdownInterval = null;

                const baseURL = 'http://192.168.1.22:520';

                // 配置axios
                axios.defaults.baseURL = baseURL;

                const toggleForm = (login) => {
                    isLogin.value = login;
                    resetForm();
                };

                const resetForm = () => {
                    formData.username = '';
                    formData.password = '';
                    formData.email = '';
                    formData.verificationCode = '';
                    message.value = '';
                    showVerificationSection.value = false;
                    codeSent.value = false;
                    isSending.value = false;
                    clearInterval(countdownInterval);
                };

                const showMessage = (text, type = 'info') => {
                    message.value = text;
                    messageType.value = type;

                    // 5秒后自动清除消息
                    setTimeout(() => {
                        message.value = '';
                    }, 5000);
                };

                const startCountdown = () => {
                    codeSent.value = true;
                    countdown.value = 300;

                    clearInterval(countdownInterval);
                    countdownInterval = setInterval(() => {
                        countdown.value--;

                        if (countdown.value <= 0) {
                            clearInterval(countdownInterval);
                            codeSent.value = false;
                            showMessage('验证码已过期，请重新获取', 'error');
                        }
                    }, 1000);
                };

                const sendVerificationCode = async () => {
                    isSending.value = true;

                    try {
                        const endpoint = isLogin.value ? '/login' : '/register';
                        const response = await axios.post(endpoint, {
                            username: formData.username,
                            password: formData.password,
                            email: formData.email
                        });

                        if (response.data.success) {
                            showMessage('验证码已发送到您的邮箱', 'success');
                            startCountdown();
                            showVerificationSection.value = true;
                        } else {
                            showMessage(response.data.message || '发送验证码失败', 'error');
                        }
                    } catch (error) {
                        console.error('发送验证码失败:', error);
                        showMessage(error.response?.data?.message || '发送验证码失败', 'error');
                    } finally {
                        isSending.value = false;
                    }
                };

                const submitForm = async () => {
                    if (!showVerificationSection.value) {
                        // 第一步：提交基本信息并请求验证码
                        await sendVerificationCode();
                    } else {
                        // 第二步：提交验证码进行验证
                        try {
                            const endpoint = isLogin.value ? '/login/verify' : '/register/verify';
                            const response = await axios.post(`${endpoint}?code=${formData.verificationCode}`);

                            if (response.data.success) {
                                if (isLogin.value) {
                                    // 登录成功，保存token
                                    const token = response.data.data.token;
                                    localStorage.setItem('authToken', token);
                                    showMessage('登录成功！', 'success');

                                    // 这里可以跳转到其他页面
                                    setTimeout(() => {
                                        // 示例：跳转到图片页面
                                        window.location.href = '/img';
                                    }, 1500);
                                } else {
                                    showMessage('注册成功！', 'success');

                                    // 注册成功后切换到登录界面
                                    setTimeout(() => {
                                        isLogin.value = true;
                                        resetForm();
                                    }, 1500);
                                }
                            } else {
                                showMessage(response.data.message || '验证失败', 'error');
                            }
                        } catch (error) {
                            console.error('验证失败:', error);
                            showMessage(error.response?.data?.message || '验证失败', 'error');
                        }
                    }
                };

                return {
                    isLogin,
                    formData,
                    message,
                    messageType,
                    showVerificationSection,
                    codeSent,
                    isSending,
                    countdown,
                    toggleForm,
                    sendVerificationCode,
                    submitForm
                };
            }
        }).mount('#app');
    </script>
</body>

</html>